<template>
  <div id="app">
    
    
    <ul>
      <router-link tag="li" to="/dome">
     
        <i class="icon iconfont icon-cainixihuan"></i>
        <p>猜你喜欢</p>
     
      </router-link>
       <router-link tag="li" to="/">
        <i class="icon iconfont icon-fenlei1"></i>
        <p>分类</p>
      </router-link>
      <li>
        <i class="icon iconfont icon--damuzhi"></i>
        <p>必抢清单</p>
      </li>
      <li>
        <i class="icon iconfont icon-gouwuche"></i>
        <p>购物车</p>
      </li>
      <li>
        <i class="icon iconfont icon-lianxirenmingdan"></i>
        <p>我的易购</p>
      </li>
    </ul>
<router-view/>
</div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; // color: #2c3e50;
  // margin-top: 60px;
  width: 100%;
}


  
  ul {
    position: fixed;
  bottom: 0;
  width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
   border-top:1px solid #ccc;
    font-size: 1.2em;
    background: #fff;
    li {
      i {
        font-size: 1.6em;
        
      }
      &:first-child{
        position: relative;
       .px2rem(bottom,14); 
       color: #ffaa00;
        i{
          font-size: 2.4em;
         
        }
      }
      &:last-child {
        position: relative;
        .px2rem(top,-14);
        .icon-lianxirenmingdan {
          font-size: 2.5em;
           position: relative;
           .px2rem(top,10)
        }
      }
      p{
        padding: 0.8em 0;
      }
    }
  }

</style>


